<template>
  <div v-loading="delloading">
    <div v-if="isCreate">
      <Create :primary="id" @send-data="getData" :title="createTitle" />
    </div>
    <div v-else>
      <Search :search="search" :reset="reset">
        <template v-slot:body>
          <el-form-item label="供应商订单号" prop="supplierOrder">
            <el-input v-model="query.supplierOrder" name="supplierOrder" clearable />
          </el-form-item>
          <el-form-item label="采购订单单号" prop="fbillno">
            <el-input v-model="query.fbillno" name="fbillno" clearable />
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="query.remarks" name="remarks" clearable />
          </el-form-item>
          <el-form-item label="采购组织" prop="fpurchaseorgid_name">
            <el-input v-model="query.fpurchaseorgid_name" name="fpurchaseorgid_name" clearable />
          </el-form-item>
          <el-form-item label="单据状态" prop="state">
            <!-- <Select v-model="query.status" clearable api="status" /> -->
            <el-select v-model="query.state" placeholder="请选择单据状态" clearable>
              <el-option label="待确认" value="0" />
              <el-option label="已审核" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="暂收状态" prop="temporary">
            <el-select v-model="query.temporary" placeholder="请选择暂收状态" clearable>
              <el-option label="未暂收" value="0" />
              <el-option label="已暂收" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建人" prop="creator_id">
            <el-select v-model="query.creator_id" placeholder="请选择创建人" clearable>
              <el-option v-for="item in personArr" :key="item.id" :label="item.username" :value="item.id" />
            </el-select>
          </el-form-item>
        </template>
      </Search>

      <div class="table-default">
        <!-- <Operate :show="open"> </Operate> -->
        <el-button class="btn" type="primary" @click="addHandler">新增 </el-button>
        <el-table :data="tableData" class="mt-3" v-loading="loading" border>
          <el-table-column prop="supplierOrder" label="供应商送货单" min-width="130" />
          <el-table-column prop="fbillno" label="采购订单单号" min-width="200" />
          <el-table-column prop="fpurchaseorgid_name" label="采购组织" width="100" />
          <el-table-column prop="state" label="状态" :formatter="formatter" width="100">
            <template #default="scope">
              <el-tag class="ml-2" type="warning" v-if="scope.row.state == 0">{{ formatstate[scope.row.state] }}</el-tag>
              <el-tag class="ml-2" type="success" v-else>{{ formatstate[scope.row.state] }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="temporary" label="暂收状态" width="100">
            <template #default="scope">
              <el-tag class="ml-2" type="success" v-if="scope.row.temporary == '已暂收'">{{ scope.row.temporary }}</el-tag>
              <el-tag class="ml-2" type="warning" v-else>{{ scope.row.temporary }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="creator_id" label="创建人" width="120" />
          <el-table-column prop="modifier" label="修改人" width="150" />
          <el-table-column prop="created_at" label="创建时间" width="150" />
          <el-table-column prop="updated_at" label="修改时间" width="150" />
          <el-table-column prop="remarks" label="备注" width="120" />

          <!-- width="270" -->
          <el-table-column label="操作" fixed="right" width="230">
            <template #default="scope">
              <router-link :to="{ path: '/purchasing/supplierDetail', query: { id: `${scope.row.id}` } }">
                <Show />
              </router-link>
              <span v-if="scope.row.state == 0" class="spanClass">
                <el-button type="warning" size="small" @click="approveHandler(scope.row.id)" v-loading.fullscreen.lock="fullscreenLoading" style="margin-left: 12px">审批</el-button>
                <Destroy @click="destroy(api, scope.row.id)" />
              </span>
            </template>
          </el-table-column>
        </el-table>
        <Paginate />
      </div>

      <!-- <Dialog v-model="visible" :title="title" destroy-on-close>
        <Create @close="close(reset)" :primary="id" :api="api" />
      </Dialog> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, getCurrentInstance } from 'vue'
import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import http from '/admin/support/http'
import { ElMessage } from 'element-plus'
import storage from '/admin/utils/storage'
import print from './print.vue'
import { useRouter, useRoute } from 'vue-router'
import { ElLoading } from 'element-plus'
import { setTableHeight } from '/admin/utils/setHeight.js'
import emitter from '/admin/utils/emitter'

// import { useStore } from 'vuex'
// let store = useStore()
// console.log('====获取store====', store)
const route = useRoute()
const router = useRouter()
const api = 'purchasing/supplier'

const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted, delloading } = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data)
const createTitle = '供货商送货单-新增'
const formatstate = {
  0: '待确认',
  1: '已审核',
}

let isCreate = ref(false)

const getData = data => {
  console.log('接受子传值')
  isCreate.value = false
}
const fullscreenLoading = ref(false)

const approveHandler = id => {
  fullscreenLoading.value = true

  http
    .put(`/purchasing/auditupdate/${id}`)
    .then(r => {
      fullscreenLoading.value = false

      ElMessage({
        message: r.data.message,
        type: 'success',
      })
      search()
    })
    .catch(error => {
      fullscreenLoading.value = false
    })
}

const addHandler = () => {
  router.push('/purchasing/supplierCreate')
}

const personArr = ref([])

const getOptions = () => {
  http.get('warehouse/uerdataApi').then(r => {
    personArr.value = r.data.data
    console.log('负责人', personArr.value)
  })
}

onMounted(() => {
  emitter.on('changeSupplierStatus', val => {
    console.log('=====监听数据',val);
    
    if (val.status == true) {
      search()
    }
    if (val.OrderStatus == true) {
      search()
    }
  })
  search()
  deleted(reset)
  setTableHeight('.table-default')
  getOptions()
})
</script>


<style>
.el-button--small {
  margin-left: 12px;
}
.el-table {
  height: 80%;
}
</style>